<!--页面组件-->
<template>
  <div>
    <!-- <loading /> -->
    <!-- v-loading="loading" -->
    <CModal
      title="创建任务"
      color="info"
      :show.sync="showCreateTaskModal"
      size="xl"
      centered
      class="processingModal"
      :closeOnBackdrop="false"
    >
      <CRow>
        <CCard class="leftCard" border-color="white" style="width:60%;">
          <CCardBody class="cardBody">
            <CRow>
              <CCol md="7">
                <CInput
                  label="任务名称"
                  style="width:385px"
                  horizontal
                  v-model="taskName"
                  :title="taskName"
                  maxlength="50"
                />
              </CCol>
              <CCol md="5">
                <!-- <CSelect
                  label="优先级"
                  style="width:210px"
                  horizontal
                  :options="options"
                  :value.sync="priorityLevel"
                />-->
                <div>
                  <div class="levelDiv">优先级</div>
                  <div class="inputRadioDiv1">
                    <CInputRadio
                      v-for="(item,index) in options"
                      :key="index"
                      type="radio"
                      :label="item.label"
                      :checked="item.isCheck"
                      @change="changeInputLevel(index)"
                      style="margin:0 10px"
                    />
                  </div>
                </div>
              </CCol>
            </CRow>
            <CRow>
              <div class="inputRadioDiv3">
                <span style="margin-right: 38px;">时间尺度</span>
                <CInputRadio
                  v-for="(item,index) in timeList"
                  :key="index"
                  type="radio"
                  :label="item.label"
                  :checked="item.isCheck"
                  @change="changeInputTimeOption(index)"
                  style="margin-left:10px;margin-right:10px"
                />
                <div style="margin-left:131px">
                  <label>时间</label>
                  <DatePicker
                    type="date"
                    placeholder="请选择日期"
                    v-model="startDate"
                    class="datePick"
                    @on-change="onStartTimeChange"
                    :options="startTimeOption"
                    :editable="false"
                  ></DatePicker>
                </div>
              </div>
            </CRow>
            <CRow v-show="sensorRow">
              <CSelect
                label="卫星/传感器"
                class="processFileterDiv"
                horizontal
                :options="sensorOption"
                :value.sync="sensorOptionValue"
                style="margin-left:10px"
              />
            </CRow>
            <CRow v-show="productionTypeRow">
              <div style="margin-left:16px">产品类型</div>
              <div class="inputRadioDiv2">
                <CInputRadio
                  v-for="(item,index) in productionType"
                  :key="index"
                  type="radio"
                  :label="item.label"
                  :checked="item.isCheck"
                  @change="changeInputProductionType(index)"
                  style="margin-left:10px;margin-right:10px"
                />
              </div>
              <div v-show="isRegion" style="margin-left:19px;margin-top:-6px">
                <span style="float:left;margin-top: 6px;">区域</span>
                <Cascader
                  :data="regionCascader"
                  change-on-select
                  filterable
                  v-model="algSelect"
                  class="regionCas"
                  :load-data="loadRegionData"
                ></Cascader>
              </div>
            </CRow>
            <CRow v-show="algoModelRow">
              <CSelect
                label="算法模型"
                class="processFileterDiv"
                horizontal
                :options="algoTypeOption"
                :value.sync="algoTypeOptionValue"
                style="margin-left:10px"
              />
            </CRow>
            <table class="table0">
              <tbody>
                <tr>
                  <td style="height:12px">
                    <div class="form-row form-group">
                      <CCol sm="1.5">
                        <span>流程选择</span>
                        <!-- <br />
                        <sapn @click="processFilter" class="processFilter">
                          <i class="fa fa-filter"></i> 过滤
                        </sapn>-->
                      </CCol>

                      <div class="inputRadioDiv">
                        <CInputRadio
                          v-for="(item, index) in listproductLine"
                          :key="index"
                          type="radio"
                          :label="item.workflowName"
                          :value="item.workflowName"
                          :checked="item.isCheck"
                          @change="changeInput(index)"
                          @click="search(item,index)"
                          class="inputRadio"
                        />
                      </div>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="position-relative table-responsive1">
                      <table class="table">
                        <!-- table-hover -->
                        <!-- table-bordered -->
                        <!-- <thead>
                          <th style="vertical-align: center">
                            <div style="width:50%; text-align:center; margin:0 auto">
                              <div style=" position:absolute">参数名称</div>
                              <div style="float:right">参数值</div>
                            </div>
                          </th>
                        </thead>-->
                        <tbody>
                          <tr v-show="showGlobalParameter">
                            <td>
                              <div class="tbHeader">
                                <span style="float:left;">基本参数：</span>
                                <CButton
                                  class="hoverstyle imgBtn"
                                  id="globalParamId"
                                  :title="'显示更多参数'"
                                  variant="outline"
                                  color="info"
                                  :flag="'hidden'"
                                  @click="displayDtParamBtn('globalBtn')"
                                >
                                  <img class="jia" :src="tdRightImg('plus')" alt />
                                </CButton>
                              </div>
                              <CDataTable
                                :key="globalItems"
                                :items="globalItems"
                                :fields="fields"
                                class="paramTable"
                                :header="haveHeader"
                                border
                                hover
                              >
                                <template #value="{item}" style="width:60%">
                                  <td>
                                    <CSelect
                                      v-if="item.type.name.toLowerCase()==='select'"
                                      horizontal
                                      :options="item.constraint"
                                      :value.sync="item.default"
                                      class="inputSelectTd"
                                      placeholder="请选择"
                                    ></CSelect>
                                    <CSelect
                                      v-else-if="item.type.name.toLowerCase()==='boolean'"
                                      horizontal
                                      :options="[{label:'请选择',value:''},{label:'是',value:true},{label:'否',value:false}]"
                                      :value.sync="item.default"
                                      class="inputSelectTd"
                                    ></CSelect>
                                    <div v-else-if="item.type.name.toLowerCase()==='dir'">
                                      <template>
                                        <CInput
                                          v-model="item['default']"
                                          clearable
                                          autocomplete="off"
                                          class="inputTd"
                                          :title="item.default"
                                          :placeholder="`${item.desc}`"
                                        />
                                        <CButton
                                          color="info"
                                          size="sm"
                                          @click="browserFile(item)"
                                          class="btnBrowser"
                                        >...</CButton>
                                      </template>
                                    </div>
                                    <div v-else-if="item.type.name.toLowerCase()==='file'">
                                      <template horizontal>
                                        <CInput
                                          v-model="item.default"
                                          clearable
                                          autocomplete="off"
                                          class="inputTd"
                                          :title="item.default"
                                          :placeholder="`${item.desc}`"
                                        />
                                        <CButton
                                          color="info"
                                          size="sm"
                                          @click="browserFile(item)"
                                          class="btnBrowser"
                                        >...</CButton>
                                      </template>
                                    </div>
                                    <div v-else-if="item.type.name.toLowerCase()==='spatialref'">
                                      <template>
                                        <CInput
                                          v-model="item.default"
                                          clearable
                                          autocomplete="off"
                                          class="inputTd"
                                          :title="item.default"
                                          :placeholder="`${item.desc}`"
                                        />
                                        <CButton
                                          color="info"
                                          size="sm"
                                          @click="browserRef(item)"
                                          class="btnBrowser"
                                        >...</CButton>
                                      </template>
                                    </div>
                                    <!-- <CInput v-else v-model="item.default" class="inputTd"></CInput> -->
                                    <div
                                      v-else-if="item.type.name.toLowerCase()==='float'"
                                      class="inputTd"
                                    >
                                      <Form :model="item" :rules="ruleCustom" ref="item">
                                        <FormItem
                                          prop="default"
                                          :rules="[{ validator:(rule, value, callback) => {
                                          let data=item
                                          if(!data.hasOwnProperty('constraint'))  callback()
                                          let min=data.constraint.min
                                          let max=data.constraint.max 
                                          let num=parseFloat(value)
                                          var reg =/-?[0-9]*\.?[0-9]+/  
                                          if (new RegExp(reg).test(value)==false)
                                          {
                                            if(max==undefined)
                                            {
                                              callback('请输入'+min+'以上的值')
                                            }
                                            else
                                              callback('请输入'+min+'-'+max+'之间的值')
                                            }
                                          else {                           
                                                if(max==undefined ) 
                                                {
                                                if(num>=min)callback() 
                                                else  callback('请输入'+min+'以上的值')
                                                }                                                  
                                                else{
                                                if(num>=min&&num<=max)  callback() 
                                              else
                                              {
                                                  if(max==undefined)  callback('请输入'+min+'以上的值')
                                                  else  callback('请输入'+min+'-'+max+'之间的值')
                                              }    
                                            }                                                        
                                          } 
                                          }}]"
                                        >
                                          <Input
                                            v-model="item.default"
                                            clearable
                                            autocomplete="off"
                                            placeholder="请输入浮点数"
                                          />
                                        </FormItem>
                                      </Form>
                                    </div>
                                    <CInput
                                      v-else
                                      v-model="item.default"
                                      clearable
                                      class="inputTd"
                                      :placeholder="`${item.desc}`"
                                    />
                                  </td>
                                </template>
                              </CDataTable>
                            </td>
                          </tr>

                          <tr
                            v-for="(item2,index) in inputDisplayParamItems"
                            :key="item2"
                            v-show="showInputParameter"
                          >
                            <td>
                              <div class="tbHeader">
                                <span style="float:left;">{{item2.groupName}}算法：</span>
                                <CButton
                                  :id="`${item2.groupName}_${index}`"
                                  class="hoverstyle imgBtn"
                                  :title="'显示更多参数'"
                                  variant="outline"
                                  color="info"
                                  :flag="'display'"
                                  @click="displayDtParamBtn(item2,index)"
                                >
                                  <img class="jia" :src="tdRightImg('plus')" alt />
                                </CButton>
                              </div>
                              <CDataTable
                                :items="item2"
                                :fields="fields"
                                :class="`${item2.length}`<1 ? 'paramTable paramTable1 ':'paramTable'"
                                :header="haveHeader"
                                border
                                hover
                              >
                                <template #value="{item}" style="width:60%">
                                  <td>
                                    <CSelect
                                      v-if="item.type.name.toLowerCase()==='select'"
                                      horizontal
                                      :options="item.constraint"
                                      :value.sync="item.default"
                                      class="inputSelectTd"
                                      placeholder="请选择"
                                    ></CSelect>
                                    <CSelect
                                      v-else-if="item.type.name.toLowerCase()==='boolean'"
                                      horizontal
                                      :options="[{label:'请选择',value:''},{label:'是',value:true},{label:'否',value:false}]"
                                      :value.sync="item.default"
                                      class="inputSelectTd"
                                    ></CSelect>
                                    <div v-else-if="item.type.name.toLowerCase()==='dir'">
                                      <template>
                                        <CInput
                                          v-model="item.default"
                                          clearable
                                          autocomplete="off"
                                          class="inputTd"
                                          :title="item.default"
                                          :placeholder="`${item.desc}`"
                                        />
                                        <CButton
                                          color="info"
                                          size="sm"
                                          @click="browserFile(item)"
                                          class="btnBrowser"
                                        >...</CButton>
                                      </template>
                                    </div>
                                    <div v-else-if="item.type.name.toLowerCase()==='file'">
                                      <template horizontal>
                                        <CInput
                                          v-model="item.default"
                                          clearable
                                          autocomplete="off"
                                          class="inputTd"
                                          :title="item.default"
                                          :placeholder="`${item.desc}`"
                                        />
                                        <CButton
                                          color="info"
                                          size="sm"
                                          @click="browserFile(item)"
                                          class="btnBrowser"
                                        >...</CButton>
                                      </template>
                                    </div>
                                    <div v-else-if="item.type.name.toLowerCase()==='spatialref'">
                                      <template>
                                        <CInput
                                          v-model="item.default"
                                          clearable
                                          autocomplete="off"
                                          class="inputTd"
                                          :title="item.default"
                                          :placeholder="`${item.desc}`"
                                        />
                                        <CButton
                                          color="info"
                                          size="sm"
                                          @click="browserRef(item)"
                                          class="btnBrowser"
                                        >...</CButton>
                                      </template>
                                    </div>
                                    <!-- <CInput v-else v-model="item.default" class="inputTd"></CInput> -->
                                    <div
                                      v-else-if="item.type.name.toLowerCase()==='float'"
                                      class="inputTd"
                                    >
                                      <Form :model="item" :rules="ruleCustom" ref="item">
                                        <FormItem
                                          prop="default"
                                          :rules="[{ validator:(rule, value, callback) => {
                                          let data=item
                                          if(!data.hasOwnProperty('constraint'))  callback()
                                          let min=data.constraint.min
                                          let max=data.constraint.max 
                                          let num=parseFloat(value)
                                          var reg =/-?[0-9]*\.?[0-9]+/  
                                          if (new RegExp(reg).test(value)==false)
                                          {
                                            if(max==undefined)
                                            {
                                              callback('请输入'+min+'以上的值')
                                            }
                                            else
                                              callback('请输入'+min+'-'+max+'之间的值')
                                            }
                                          else {                           
                                                if(max==undefined ) 
                                                {
                                                if(num>=min)callback() 
                                                else  callback('请输入'+min+'以上的值')
                                                }                                                  
                                                else{
                                                if(num>=min&&num<=max)  callback() 
                                              else
                                              {
                                                  if(max==undefined)  callback('请输入'+min+'以上的值')
                                                  else  callback('请输入'+min+'-'+max+'之间的值')
                                              }    
                                            }                                                        
                                          } 
                                          }}]"
                                        >
                                          <Input
                                            v-model="item.default"
                                            clearable
                                            autocomplete="off"
                                            placeholder="请输入浮点数"
                                          />
                                        </FormItem>
                                      </Form>
                                    </div>
                                    <CInput
                                      v-else
                                      v-model="item.default"
                                      clearable
                                      class="inputTd"
                                      :placeholder="`${item.desc}`"
                                    />
                                  </td>
                                </template>
                              </CDataTable>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </CCardBody>
          <big-img v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"></big-img>
        </CCard>

        <CCard class="rightCard" style="width:37%">
          <CTextarea label="任务描述" placeholder="流程描述" v-model="taskdesc" horizontal disabled />
          <label class="processGraph">流程图</label>
          <div class="picDiv">
            <img :src="picture" alt ref="img1" class="img1" @click="clickImg($event)" />
          </div>
        </CCard>
      </CRow>

      <template #header>
        <h5 class="modal-title">创建任务</h5>
        <CButtonClose @click="showCreateTaskModalx" />
      </template>
      <template #footer>
        <div class="footDiv">
          <div style="text-align:center ">
            <CButton
              @click="submit"
              color="info"
              class="btn1"
              style="width:82px"
              data-permission="Btn_Process_Run"
              title="流程执行"
            >执行</CButton>
            <CButton @click="batchParamCheck" color="info" class="btn1">参数校验</CButton>
            <CButton
              @click="showCreateTaskModal = false"
              color="info"
              class="btn1 delBtn"
              style="width:82px"
            >取消</CButton>
          </div>
          <div class="radioRight">
            <CInputCheckbox
              label="保存默认参数"
              type="radio"
              :checked.sync="defaultParamRadio"
              value="保存默认参数"
            />
          </div>
        </div>
      </template>
    </CModal>

    <CModal
      title="选择目录"
      color="info"
      :show.sync="showZtreeModal"
      :closeOnBackdrop="false"
      size="lg"
      centered
      class="menuModal"
    >
      <div style="height:60px">
        <div>
          <!-- <CLink class="px-2">本地文件</CLink>
          <br>-->
          <CLink class="px-2" @click="shareMenu(currenItem)">共享文件夹</CLink>
          <br />
          <CLink class="px-2" @click="userMenu(currenItem)">用户文件夹</CLink>
          <!-- <br>
          <CLink class="px-2" >数据订单</CLink>-->
        </div>
        <div class="optiostyle displaySuffix" style="display:none">
          <CInputCheckbox label="是否批量" type="radio" :checked.sync="isBatch" value="是否批量" />
          <CSelect
            label="过滤条件"
            horizontal
            :options="suffix"
            :value.sync="currenSelectSuffix"
            class="selectSuffix"
          ></CSelect>
          <CButton color="info" @click="suffixSearch" class="suffixBtn">过滤</CButton>
        </div>
      </div>
      <div class="treeDiv">
        <ul id="treeDemo" class="ztree"></ul>
      </div>

      <template #header>
        <h5>选择目录</h5>
        <CButtonClose @click="menuCancel" />
      </template>
      <template #footer>
        <CButton @click="menuSaveAs" color="info" title="点击文件夹即可，不需要打钩选中哦~">另存为</CButton>
        <CButton @click="menuOk" color="info" style="width:68px">确定</CButton>
        <CButton @click="menuCancel" color="info" class="delBtn" style="width:68px">取消</CButton>
      </template>
    </CModal>

    <CModal
      title="新增"
      color="info"
      :show.sync="saveAsModal"
      :closeOnBackdrop="false"
      size="sm"
      centered
    >
      <template #header>
        <h6>新增</h6>
        <CButtonClose @click="saveAsFileCancel" class="text-white" />
      </template>
      <div class="saveFile">
        <CInput label="文件:" class="saveFileStyle" horizontal v-model="newFileName" />
      </div>
      <div class="saveFolder">
        <CInput label="文件夹:" class="saveFileStyle" horizontal v-model="newFileName" />
      </div>
      <template #footer>
        <CButton @click="saveAsFileOK" color="info">确定</CButton>
        <CButton @click="saveAsFileCancel" color="info">取消</CButton>
      </template>
    </CModal>

    <CModal
      title="选择空间参考"
      color="info"
      :show.sync="showZtreeRefModal"
      :closeOnBackdrop="false"
      size="lg"
      centered
      class="menuModal"
    >
      <div class="treeDiv">
        <ul id="treeDemo1" class="ztree"></ul>
      </div>
      <template #header>
        <h5>选择空间参考</h5>
        <CButtonClose @click="menuCancel" />
      </template>
      <template #footer>
        <CButton @click="menuRefOk" color="info">确定</CButton>
        <CButton @click="menuCancel" color="light ">取消</CButton>
      </template>
    </CModal>

    <CModal
      title="批量参数比对"
      color="info"
      backdrop
      :show.sync="batchParamModal"
      :closeOnBackdrop="false"
      size="xl"
      centered
    >
      <div>
        <CRow>
          <CCol sm="6" v-for="(items1, index) in paramList" :key="index">
            <div>{{items1.label}}：</div>
            <select multiple class="batchSelect">
              <option
                v-for="(itemsli,index) in items1.defaultList"
                :key="index"
                @click="liClick(items1,index)"
                :title="itemsli"
              >{{ itemsli}}</option>
            </select>
          </CCol>
        </CRow>
      </div>
      <template #footer>
        <div style="float:left;width:41%">
          <button @click="moveUp()" class="btn1" style="border:none">
            <img src="../../assets/icons/up.png" alt title="上移" />
          </button>
          <button @click="moveDown()" class="btn1" style="border:none">
            <img src="../../assets/icons/down.png" alt title="下移" />
          </button>
        </div>
        <CButton @click="batchCheckOk" color="info">确定</CButton>
        <CButton @click="batchCheckCancel" color="light ">取消</CButton>
      </template>
    </CModal>

    <CModal
      title="查看流程图"
      color="info"
      :show.sync="displayProductionLineGraphs"
      :closeOnBackdrop="false"
      size="lg"
      centered
    >
      <CCardBody style="text-align: center;">
        <img :src="picture" alt class="styImg" />
      </CCardBody>
      <template #header>
        <h5 class="modal-title">查看流程图</h5>
        <CButtonClose @click="displayProductionLineGraphs = false" class="text-white" />
      </template>
      <template #footer>
        <CButton @click="displayProductionLineGraphs = false" color="info">返回</CButton>
      </template>
    </CModal>

    <CModal
      title="算法流程过滤"
      color="info"
      :show.sync="processfilterModal"
      :closeOnBackdrop="false"
      centered
      style="height:394px"
    >
      <template #header>
        <h5 class="modal-title">算法流程过滤</h5>
      </template>
      <CCardBody style="text-align: center;">
        <CSelect
          label="卫星/传感器"
          class="processFileterDiv"
          horizontal
          :options="sensorOption"
          :value.sync="sensorOptionValue"
        />
        <div style="float:left">产品类型</div>
        <div class="inputRadioDiv2">
          <CInputRadio
            v-for="(item,index) in productionType"
            :key="index"
            type="radio"
            :label="item.label"
            :checked="item.isCheck"
            @change="changeInputProductionType(index)"
            style="margin-left:10px;margin-right:10px"
          />
        </div>
        <div class="formstyle" v-show="isRegion">
          <span style="float:left;margin-top: 6px;">区域</span>
          <Cascader
            :data="regionCascader"
            change-on-select
            filterable
            v-model="algSelect"
            class="regionCas"
            :load-data="loadRegionData"
          ></Cascader>
        </div>
        <CSelect
          label="算法模型"
          class="processFileterDiv"
          horizontal
          :options="algoTypeOption"
          :value.sync="algoTypeOptionValue"
        />
      </CCardBody>

      <template #footer>
        <CButton @click="filterOk" color="info">确定</CButton>
        <CButton @click="filteCancel" color="light ">取消</CButton>
      </template>
    </CModal>

    <CModal
      title="表单验证测试"
      color="info"
      :show.sync="testModal"
      :closeOnBackdrop="false"
      size="sm"
      centered
    >
      <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">
        <FormItem label="Age" prop="age">
          <Input type="text" v-model="formCustom.age" />
        </FormItem>
        <FormItem label="count" prop="count">
          <Input type="text" v-model="formCustom.count" />
        </FormItem>
      </Form>
    </CModal>
  </div>
</template>

<!--js代码-->
<script>
// import loading from "../../../src/plugins/loading/loading"
import viewBigImg from "../jobProcess/viewBigImg";
const items = [];
const fields = [
  //  { key: "groupName", label: "组名", _style: "width:20%" },
  { key: "label", label: "参数名称", _style: "width:20%;" },
  { key: "value", label: "参数值", _style: "width:80%;" }
];
const listproductLine = [];
export default {
  name: "common",
  data() {
    var validateuser = function(rule, value, callback) {
      if (!value) {
        return callback(new Error("请输入用户名"));
      } else if (!/^[a-zA-Z\d]+$/.test(value)) {
        return callback(new Error("请正确输入用户名"));
      } else {
        callback();
      }
    };
    var validateAge = (rule, value, callback) => {
      if (!Number.isInteger(+value)) {
        callback(new Error("请输入数字"));
      } else {
        callback();
      }
    };
    var validateCount = (rule, value, callback) => {
      if (!Number.isInteger(+value)) {
        callback(new Error("请输入数字"));
      } else if (Number.isInteger(+value)) {
        let num = Number(value);
        let length = value.length;
        if (length < 3) {
          callback(new Error("请输入长度为3的数字"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    return {
      processfilterModal: false,
      displayProductionLineGraphs: false,
      taskdesc: "",
      hiddenDtParam: [], //表格隐藏参数
      displayDtParam: [], //表格显示参数
      // loading: true,
      showImg: false,
      imgSrc: "",
      showInputParameter: false,
      showGlobalParameter: false,

      validateCount: validateCount,
      formCustom: {
        age: 10,
        count: 1
      },
      ruleCustom: {
        age: [
          { required: true, message: "年龄不能为空", trigger: "blur" },
          { validator: validateAge, trigger: "blur" }
        ],
        count: [
          { required: true, message: "数量不能为空", trigger: "blur" },
          { validator: validateCount, trigger: "blur" }
        ],
        default: [
          { required: true, message: "请输入数字", trigger: "blur" },
          { validator: validateCount, trigger: "blur" }
        ]
      },

      paramList: [],
      batchParamModal: false,
      isBatch: false,
      id: "", //流程线父(组)ID
      type: "", //流程类型 image：影像 parameter：参量
      taskType: "", //提交任务类型
      userName: "",

      listproductLine: [], //算法选择参数
      options: [
        //优先级
        { label: "普通", value: "0", isCheck: true },
        { label: "优先", value: "1", isCheck: false }
      ],
      /***************** start 以下为参量属性设置 ************************/
      sensorRow: false,
      productionTypeRow: false,
      algoModelRow: false,
      startTimeOption: {},
      startDate: "",
      timeList: [
        { label: "月度", value: "0", isCheck: true },
        { label: "年度", value: "1", isCheck: false },
        { label: "季度", value: "2", isCheck: false }
      ],
      currentTime: 0,
      productionType: [
        { label: "单景产品", value: "0", isCheck: true },
        { label: "合成产品", value: "1", isCheck: false }
      ],
      productionTypeValue: 0,
      sensorOption: [
        { label: "MODIS", value: "0", isCheck: true },
        { label: "GF1wfv", value: "1", isCheck: false },
        { label: "GF1 PMS", value: "2", isCheck: false },
        { label: "GF2 PMS", value: "3", isCheck: false },
        { label: "landsat5", value: "4", isCheck: false },
        { label: "landsat7", value: "5", isCheck: false },
        { label: "landsat8", value: "6", isCheck: false }
      ],
      sensorOptionValue: 0,
      algoTypeOption: [
        { label: "归一化植被指数NDVI", value: "0", isCheck: true },
        { label: "比值植被指数RVI", value: "1", isCheck: false },
        { label: "增强型植被指数EVI", value: "2", isCheck: false }
      ],
      algoTypeOptionValue: 0,
      algSelect: [],
      regionCascader: [
        { label: "全国", value: 0, loading: false, children: [] },
        { label: "其他", value: 1, loading: false, children: [] }
      ], //级联选择
      cascaderValue: [],
      isRegion: false,
      regionValue: "",
      /*****************end 以上为参量属性设置 ************************/
      suffix: [],
      currenSelectSuffix: "",
      // items: items.map((item, id) => {
      //   return { ...item, id };
      // }),
      items: [],
      globalItems: undefined,
      inputDisplayParamItems: [], //表格默认显示
      inputParamItems: [], //表格显示和隐藏全部参数
      fields,
      taskName: "",
      currenItem: "",
      workflowId: "",
      workflowName: "",
      picture: "",
      priorityLevel: 0,
      showCreateTaskModal: false,
      showZtreeModal: false,
      showZtreeRefModal: false,
      saveAsModal: false,
      isRefModal: false,
      newFileName: "",
      isFile: false,
      defaultParamRadio: true,
      testModal: false,
      haveHeader: false,
      selectBatchParamData: new Object()
    };
  },
  watch: {
    $route: {
      handler() {
        this.id = this.$route.params.id;
        this.type = this.$route.params.type;
        this.getProduct();
      },
      deep: true
    },
    taskName(newVal, oldVal) {
      if (newVal.length >= 50) {
        // this.$Message.error("任务名称长度不得超过50个字符");
      }
    },
    showCreateTaskModal(newVal, oldVal) {
      if (newVal == false) {
        this.toRoute();
      }
    },
    inputDisplayParamItems: {
      handler(newval, oldval) {},
      deep: true
    }
  },
  created() {},

  mounted() {
    this.id = this.$route.params.id;
    this.type = this.$route.params.type;
    let name = this.$route.name;
    if (name === "commonProcess") {
      this.taskType = 2;
    } else if (name === "commonQualityCheck") {
      this.taskType = 1;
    }

    this.layoutByType();
    this.getProduct();
    let user = this.$store.state.user;
    if (user == null) {
      this.userName = null;
    } else {
      this.userName = user.userName;
    }
  },
  methods: {
    //根据数据的类型控制界面的显示 image 影像 parameter 参量
    layoutByType() {
      let type = this.type;
      if (type === "parameter") {
        this.sensorRow = true;
        this.productionTypeRow = true;
        this.algoModelRow = true;
      }
    },
    toRoute() {
      if (this.taskType == 1) {
        this.$router.push({
          path: "/qualityCheck",
          query: {
            from: "qualityCheckCommon"
          }
        });
      } else if (this.taskType == 2) {
        this.$router.push({
          path: "/processing",
          query: {
            from: "commonx"
          }
        });
      }
    },
    tdRightImg(type) {
      let img = {
        plus: require("./../../assets/icons/leftArrow.svg"),
        reduce: require("./../../assets/icons/downArrow.svg")
      };
      return img[type];
    },
    processFilter() {
      this.processfilterModal = true;
    },
    clickImg(e) {
      this.displayProductionLineGraphs = true;
      return;
      // this.showImg = true;
      // // 获取当前图片地址
      // this.imgSrc = e.currentTarget.src;
    },

    // viewImg() {
    //   this.showImg = false;
    // },

    // ----------------------------以下批量参数比对功能部分 ---------------------------------//
    batchCheckOk() {
      this.batchParamModal = false;
      let batchData = this.paramList;
      let tableData = this.items;
      let flag = 0;
      for (let i in batchData) {
        //目的是替换表格数据this.items中对应的批量数据替换
        let temp = batchData[i];
        let info = "";
        for (let m in temp.defaultList) {
          if (info == "") info = temp.defaultList[m];
          else info += "#HT#" + temp.defaultList[m];
        }
        for (let j in tableData) {
          //比对表格this.items中每个算法下每个参数的workflowInputKey是否相对 y 替换 n 不变
          let tempData = tableData[j];
          for (let n in tempData) {
            let tempData2 = tempData[n];
            if (temp.workflowInputKey === tempData2.workflowInputKey) {
              this.$nextTick(function() {
                this.$set(this.items[j][n], "default", info);
              });
              flag++;
            }
            if (flag == batchData.length) break;
          }
          if (flag == batchData.length) break;
        }
      }
    },
    batchCheckCancel() {
      this.batchParamModal = false;
    },
    moveUp() {
      let childrenData = this.selectBatchParamData;
      let index = this.getIndex();
      let list = [];
      list = childrenData.data.defaultList;
      let childIndex = childrenData.index;
      if (list.length > 1 && childIndex != 0) {
        var temp = list[childIndex - 1];
        list[childIndex - 1] = list[childIndex];
        list[childIndex] = temp;
        this.paramList[index].defaultList = [];
        this.$nextTick(function() {
          this.$set(this.paramList[index], "defaultList", list);
        });
      }
    },
    moveDown() {
      let childrenData = this.selectBatchParamData;
      let index = this.getIndex();
      let list = [];
      list = childrenData.data.defaultList;
      let childIndex = childrenData.index;
      if (list.length > 1 && childIndex != list.length - 1) {
        var temp = list[childIndex + 1];
        list[childIndex + 1] = list[childIndex];
        list[childIndex] = temp;
        this.paramList[index].defaultList = [];
        this.$nextTick(function() {
          this.$set(this.paramList[index], "defaultList", list);
        });
      }
    },
    getIndex() {
      let data = this.paramList;
      let childrenData = this.selectBatchParamData;
      //1 根据childrenData得到在父data数组中的索引值
      //2、改变childrenData的上移和下移动后的数据
      //3、根据索引值改变data的对应的值用移动后的数据替换
      let index = 0;
      let flag = false;
      for (let i in childrenData) {
        let tempData = childrenData[i].workflowInputKey;
        for (let j in data) {
          let tempData1 = data[j].workflowInputKey;
          if (tempData === tempData1) {
            index = j;
            flag = true;
            break;
          }
        }
        if (flag) break;
      }
      return index;
    },

    liClick(item, index) {
      let obj = new Object();
      obj.data = item;
      obj.index = index;
      this.selectBatchParamData = obj;
    },

    //批量参数校验 初始化参数
    batchParamCheck() {
      let dataList = this.items;
      let newDataList = [];
      let list = [];
      let obj = new Object();
      for (var i in dataList) {
        for (let j in dataList[i]) {
          let tempData = dataList[i][j];
          obj = tempData;
          if (
            tempData.type.name.toLowerCase() === "file" ||
            tempData.type.name.toLowerCase() === "dir"
          ) {
            if (
              tempData.workflowInputKey.indexOf("pan") != -1 ||
              tempData.workflowInputKey.indexOf("mss") != -1
            ) {
              if (
                tempData.type.plural &&
                tempData.default.indexOf("#HT#") != -1
              ) {
                let tempList1 = tempData.default.split("#HT#");
                obj.defaultList = tempList1;
                newDataList.push(obj);
              }
            }
          }
        }
      }
      this.paramList = newDataList;
      if (newDataList.length > 0) this.batchParamModal = true;
      else this.$Message.info("没有可以比对的数据");
    },

    // ----------------------------以上批量参数比对功能部分 ---------------------------------//
    showCreateTaskModalx() {
      this.showCreateTaskModal = false;
    },

    //对应流程线的流程图
    displayProductionLineGraph() {
      let workFlowId = this.workflowId;
      let path =
        this.GlobalUrlPath.productManage.loopUpGraph +
        workFlowId +
        "/findPicture";
      this.picture = path;
    },

    getProduct() {
      let path = this.GlobalUrlPath.productManage.search; //search
      let param = {
        groupId: this.id
      };
      this.http.get(path, param).then(res => {
        let data = res.data;
        if (data.code == 0) {
          if (data.data.length > 0) {
            this.showCreateTaskModal = true;

            let tempList = [];
            for (var item in data.data) {
              let tempItem = data.data[item];
              if (item == 0) {
                tempItem["isCheck"] = true;
              } else {
                tempItem["isCheck"] = false;
              }
              tempList.push(tempItem);
            }
            this.listproductLine = tempList;
            this.workflowId = data.data[0].id;
            this.taskdesc = tempList[0].description;
            this.displayProductionLineGraph();
            this.getParamList(); // 动态获取参数;

            let currentTime = this.getTime(); //任务名称
            this.taskName =
              data.data[0].workflowName +
              "_" +
              this.userName +
              "_" +
              currentTime;
          } else {
            this.showCreateTaskModal = false;

            this.items = [];
            this.listproductLine = [];
            this.displayProductionLineGraph();
          }
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },

    //流程任务执行
    submit() {
      let t = this;
      if (this.taskName == "") {
        this.$Message.error("任务名称没有填哦！");
        return;
      }

      if (this.taskName.length > 50) {
        this.$Message.error("任务名称不能超过50个字符");
        return;
      }

      //let inputParamData = this.inputDisplayParamItems;//当前表格的参数
      let inputParamData = this.inputParamItems;

      let state = this.defaultParamRadio;
      let defaultParam = { inputParam: [] };
      defaultParam.globalParam = this.globalItems;
      for (var i in inputParamData)
        defaultParam.inputParam.push(inputParamData[i]);

      let submitPath = this.GlobalUrlPath.processProduct.submitTask;
      let params = {
        item: JSON.stringify(defaultParam),
        workflowId: this.workflowId,
        name: this.taskName,
        priorityLevel: this.priorityLevel,
        userId: 0,
        taskType: this.taskType, // 2, //1 质检 2 数据处理
        isSaveDefaultParameter: state
      };

      console.log("任务创建提交参数", params);
      this.http.post(submitPath, params).then(res => {
        if (res.data.success) {
          this.$Message.success("提交任务成功");
          this.showCreateTaskModal = false;
        } else {
          this.$Message.error("提交失败:" + res.data.message);
        }
      });
    },

    //radio算法选择显示流程参数切换
    search(item, index) {
      this.workflowId = item.id;
      this.taskdesc = item.description;
      this.getParamList();
      // this.getProcessParameters();
      this.displayProductionLineGraph();
    },

    getParamList() {
      // this.getParamListNew()
      // return
      let workflowId = this.workflowId;
      console.log("点击的workflowId", workflowId);

      let user = this.$store.getters.getUser;
      if (user == null || !user.hasOwnProperty("token")) return;

      let defaultPath = this.GlobalUrlPath.processProduct.searchProcessParameters;
      let param1 = {
        workFlowId: workflowId
      };
      this.displayDtParam = []; //表格显示数据置空
      this.hiddenDtParam = [];
      let _this = this;
      this.http.get(defaultPath, param1).then(res => {
        let data = res.data;

        if (data.success) {
          let inputParam = JSON.parse(data.data.processParameters).inputParam;
          let globalParam = JSON.parse(data.data.processParameters).globalParam;
          let params = JSON.parse(data.data.processParameters);

          //参数显示隐藏

          this.showInputParameter = true;
          for (let i = 0; i < inputParam.length; i++) {
            let temp = inputParam[i];
            let display = [];
            let hidden = [];
            for (let j = 0; j < temp.length; j++) {
              let tempValue = temp[j];
              let defaultVal = tempValue.default;
              if (
                tempValue.type.name.toLowerCase() === "select" &&
                typeof defaultVal === "object"
              ) {
                tempValue.default = defaultVal.value;
              }
              if (tempValue.hasOwnProperty("display")) {
                if (tempValue.display) display.push(tempValue);
                else hidden.push(tempValue);
              } else {
                display.push(tempValue);
              }
            }
            if (hidden.length < 1) hidden.isDisplay = false;
            display.groupName = temp[0].groupName;
            hidden.groupName = temp[0].groupName;
            this.hiddenDtParam.push(hidden); //显示和隐藏的时候需要更新维护
            this.displayDtParam.push(display); //只在表格初始化的时候用一次
          }
          let dd = this.displayDtParam;
          // console.log(
          //   "勿删---查询算法流程数据：" +
          //     "workflowId:" +
          //     workflowId +
          //     "\r\n" +
          //     "data:" +
          //     JSON.stringify(params)
          // );

          if (
            params.globalParam == undefined ||
            params.globalParam.length < 1
          ) {
            this.showInputParameter = true;
            this.showGlobalParameter = false;

            this.inputDisplayParamItems = this.displayDtParam; //inputParam;
            this.inputParamItems = inputParam; //表格参数全部数据
            this.globalItems = undefined;
          } else {
            this.showInputParameter = false;
            this.showGlobalParameter = true;
            this.inputDisplayParamItems = this.displayDtParam; // inputParam;
            this.inputParamItems = inputParam;

            _this.globalItems = globalParam;
            // _this.globalItems = JSON.parse(JSON.stringify(globalParam)); //deep copy
          }
        } else {
          this.$Message.error(res.data.message);
        }

        this.$nextTick(() => {
          this.setDisplayHidBtnStyle();
        });
      });
    },
    setDisplayHidBtnStyle() {
      //对显示隐藏按钮样式做判断
      let hiddeItem = this.hiddenDtParam;
      let id = "";
      //基本参数控制算法参数的显示

      if (this.globalItems != undefined && this.globalItems.length > 1) {
        id = "globalParamId";
        let img = $("#" + id).find("img");
        $("#" + id).attr("flag", "display");
        $("#" + id).attr("title", "显示更多参数");
        img.attr("src", this.tdRightImg("plus"));
      }

      hiddeItem.forEach((element, index) => {
        id = element.groupName + "_" + index;
        id = this.getFormatId(id);
        let img = $("#" + id).find("img");

        if (element.length < 1) {
          $("#" + id).css("display", "none");
        } else {
          $("#" + id).css("display", "block");
          img.attr("src", this.tdRightImg("plus"));
        }
      });
    },
    //解决Dom元素标签id为特殊字符 根据元素id获取Dom对象失败问题
    getFormatId(srcString) {
      // 转义之后的结果
      var result = srcString;
      // javascript正则表达式中的特殊字符
      var jsSpecialChars = [
        "\\",
        "^",
        "$",
        "*",
        "?",
        ".",
        "+",
        "(",
        ")",
        "[",
        "]",
        "|",
        "{",
        "}"
      ];

      // jquery中的特殊字符,不是正则表达式中的特殊字符
      var jquerySpecialChars = [
        "~",
        "`",
        "@",
        "#",
        "%",
        "&",
        "=",
        "'",
        '"',
        ":",
        ";",
        "<",
        ">",
        ",",
        "/"
      ];

      for (var i = 0; i < jsSpecialChars.length; i++) {
        result = result.replace(
          new RegExp("\\" + jsSpecialChars[i], "g"),
          "\\" + jsSpecialChars[i]
        );
      }

      for (var i = 0; i < jquerySpecialChars.length; i++) {
        result = result.replace(
          new RegExp(jquerySpecialChars[i], "g"),
          "\\" + jquerySpecialChars[i]
        );
      }
      return result;
    },
    displayDtParamBtn(data, index) {
      let id = "";
      let groupName = "";
      let btnName = "";

      if (data === "globalBtn") {
        btnName = "globalBtn";
        //基本参数右侧控制按钮
        id = "globalParamId";
      } else {
        //算法参数右上角显示控制按钮
        groupName = data.groupName; //当前表格算法分组
        id = groupName + "_" + index; //当前td id
        id = this.getFormatId(id);
      }

      let flag = $("#" + id).attr("flag");
      let img = $("#" + id).find("img");
      if (flag == "display") {
        //显示更多
        $("#" + id).attr("flag", "hidden");
        $("#" + id).attr("title", "隐藏参数");
        img.attr("src", this.tdRightImg("reduce"));

        if (btnName !== "" && data === btnName)
          this.showInputParameter = !this.showInputParameter;
        else this.displayAlgoParam(index);
      } else if (flag == "hidden") {
        //隐藏参数
        $("#" + id).attr("flag", "display");
        $("#" + id).attr("title", "显示更多参数");
        img.attr("src", this.tdRightImg("plus"));

        if (btnName !== "" && data === btnName)
          this.showInputParameter = !this.showInputParameter;
        else this.hiddenAlgoParam(index);
      }
    },

    //显示表格隐藏算法参数
    displayAlgoParam(index) {
      let currentTableParam = this.inputDisplayParamItems[index];
      let hiddenParam = this.hiddenDtParam[index];

      let length = currentTableParam.length;
      for (let j = 0; j < hiddenParam.length; j++) {
        let tempHid = hiddenParam[j];
        this.inputDisplayParamItems[index].push(tempHid);
        // this.$nextTick(function() {
       
        //   this.$set(this.inputDisplayParamItems[index], length + j, tempHid);
        //   let len = length + j + 1;
        //   this.inputDisplayParamItems[index].splice(len);
        // });
      }
    },
    // 隐藏表格显示算法参数
    hiddenAlgoParam(index) {
      /**
       * 思路：1、获取当前表格数据源currentTableParam：根据当前点击的表格索引获取当前表格参数
       * 2、移除表格数据源要隐藏的参数：currentTableParam和全局的隐藏参数hiddenParam进行比对 如果hiddenParam的参数和currentTableParam参数相同则移除currentTableParam对应的参数
       * 3、更新隐藏参数列表：在2的基础上判断当前全局的hiddenParam和已经显示到表格中的隐藏参数值是否发生变化 是 用currentTableParam最新的参数替换隐藏参数中对应参数
       */
      let currentTableParam = this.inputDisplayParamItems[index];
      let hiddenParam = this.hiddenDtParam[index];

      for (let i = 0; i < currentTableParam.length; i++) {
        let tempItem = currentTableParam[i];
        hiddenParam.forEach((element, index1) => {
          if (tempItem.name === element.name) {
            currentTableParam.splice(i, 1); //删除索引i的1个元素
            i--; //必须有
            // if (tempItem.default !== element.default) {
            //   // hiddenParam.findIndex(item => item === tempHid),//返回元素索引
            //   hiddenParam[j].splice(j, 1, tempItem); //在索引为indexx1的位置删除一个元素再添加一个元素对象 tempItem
            // }
          }
        });
      }
    },
    //查询
    getProcessParameters() {
      let workflowId = this.workflowId;
      let path = this.GlobalUrlPath.processProduct.processParameters;
      let param = {
        workFlowId: workflowId
      };
      this.http.get(path, param).then(res => {
        if (res.data.code == 0) {
          let params = JSON.parse(res.data.data.processParameters).inputParam;
          console.log("全局参数", params);
        }
      });
    },
    getParamList1() {
      let workflowId = this.workflowId;
      //先查询是否存在默认参数 y 显示默认 N显示算法自身参数
      let defaultPath = this.GlobalUrlPath.processProduct.searchProcessParameters;
      let param1 = {
        workFlowId: workflowId
      };
      this.http.get(defaultPath, param1).then(res => {
        let data = res.data;
        if (data.success) {
          let isDeafault = false;
          if (data.data.processParametersList.length < 1) {
            this.getParamListNew();
          } else {
            let dataList = JSON.parse(
              data.data.processParametersList[0].processParameters
            );
            let arrData = dataList.inputParam;
            let newTempList = [];
            for (var i in arrData) {
              let newDataList = [];
              isDeafault = true;
              newDataList = this.getData(
                arrData[i],
                "",
                newDataList,
                isDeafault
              );
              newTempList.push(newDataList);
            }
            this.items = newTempList;
            console.log("默认参数显示数据", newTempList);
          }
        } else {
          this.getParamListNew();
        }
      });
    },

    getParamListNew() {
      let workflowId = this.workflowId;
      let path =
        this.GlobalUrlPath.processProduct.productLineQuery +
        workflowId +
        "/findParam";
      this.http.get(path).then(res => {
        let data = res.data;
        console.log("算法原始参数", data);
        let isDeafault = false;
        if (data.code == 0) {
          let newTempList = [];
          for (var i in data.data) {
            let tempList = [];
            let newDataList = [];
            tempList = data.data[i]["input-parameters"];

            newDataList = this.getData(
              tempList,
              data.data[i].name,
              newDataList,
              isDeafault
            );
            newTempList.push(newDataList);
          }
          this.items = newTempList;
          console.log("表格渲染原始显示参数", newTempList);
        } else {
          this.items = [];
          this.$Message.error(res.data.message);
          this.$Message.error(res.data.message);
        }
      });
    },

    getData(tempList, groupName, newList, isDeafault) {
      let arrData = tempList;
      var tempInfo = [];
      var type = "";
      var enumInfo = "";
      for (var index in arrData) {
        tempInfo = arrData[index];
        type = tempInfo.type.name.toLowerCase();
        enumInfo = tempInfo.constraint;
        let enumObjArr = [];
        if (type === "select") {
          if (isDeafault) {
            enumObjArr = tempInfo.constraint;
          } else {
            enumInfo = tempInfo.constraint.values;
            for (var key in enumInfo) {
              let newObj = new Object();
              newObj.value = key;
              newObj.label = enumInfo[key];
              enumObjArr.push(newObj);
            }
          }
          // if (tempInfo.constraint[0].hasOwnProperty("value")) {
          //   enumObjArr = tempInfo.constraint;
          // } else if (tempInfo.constraint.hasOwnProperty("values")) {
          //   enumInfo = tempInfo.constraint.values;
          //   for (var key in enumInfo) {
          //     let newObj = new Object();
          //     newObj.value = key;
          //     newObj.label = enumInfo[key];
          //     enumObjArr.push(newObj);
          //   }
          // }

          delete tempInfo.constraint;
          tempInfo.constraint = enumObjArr;
        }
        if (!tempInfo.hasOwnProperty("default")) {
          tempInfo.default = "";
        }
        if (groupName != "") tempInfo.groupName = groupName;
        newList.push(tempInfo);
      }
      return newList;
    },

    changeInput(index) {
      this.listproductLine.map((v, i) => {
        if (i == index) {
          v.isCheck = true;
        } else {
          v.isCheck = false;
        }
      });
      let name = this.listproductLine[index].workflowName;
      let currentTime = this.getTime();
      this.taskName = name + "_" + this.userName + "_" + currentTime;
    },

    changeInputLevel(index) {
      this.options.map((v, i) => {
        if (i == index) {
          v.isCheck = true;
          this.priorityLevel = v.value;
        } else v.isCheck = false;
      });
    },

    changeInputProductionType(index) {
      if (index == 1) {
        this.isRegion = true;
        this.searchprovince();
      } else {
        this.isRegion = false;
      }
      this.productionType.map((v, i) => {
        if (i == index) {
          v.isCheck = true;
          this.productionTypeValue = v.value;
        } else v.isCheck = false;
      });
    },
    changeInputTimeOption(index) {
      this.timeList.map((v, i) => {
        if (i == index) {
          v.isCheck = true;
          this.currentTime = v.value;
        } else v.isCheck = false;
      });
    },

    getTime() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var hours = date.getHours();
      var minutes = date.getMinutes();
      var seconds = date.getSeconds();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      let time = year + month + day + " " + hours + ":" + minutes;
      return time;
    },

    //////////////////////////////////以下为目录浏览功能//////////////////////////////////
    //文件浏览功能
    browserFile(item) {
      let self = this;
      self.currenItem = item;
      this.showZtreeModal = true;
      this.isRefModal = false;

      if (!item.hasOwnProperty("constraint")) {
        self.suffix = [];
        self.currenSelectSuffix = "";
        return;
      }
      let extensions = item.constraint.extensions.split(/[,;]/);
      let tempSuffix = [];
      for (var i in extensions) {
        let newObj = new Object();
        let name = extensions[i];
        newObj.value = name.substring(2, name.length);
        newObj.label = name.substring(2, name.length);
        tempSuffix.push(newObj);
      }
      self.suffix = tempSuffix;
      self.currenSelectSuffix = tempSuffix[0].value;
    },

    browserRef(item) {
      this.isRefModal = true;
      this.showZtreeRefModal = true;
      let self = this;
      self.currenItem = item;
      let path = this.GlobalUrlPath.processProduct.browserRefPath;
      let setting = {
        check: {
          enable: true,
          nocheckInherit: false,
          chkboxType: { Y: "", N: "" }
        },
        data: {
          simpleData: {
            enable: true
          }
        },
        callback: {
          // beforeClick: this.beforeClick,
          // onClick: this.zTreeOnClick,
          // onCheck: this.zTreeOnCheck,
          // onExpand: this.zTreeOnClick
        }
      };
      this.http.get(path).then(res => {
        let data = res.data;
        if (data.success == true) {
          $.fn.zTree.init($("#treeDemo1"), setting, data.data);
          console.log("refTree", data.data);
        }
      });
    },

    menuSetting(item, urlPath) {
      $(".displaySuffix").css("display", "block");
      let checkType = { Y: "", N: "" }; //父与子的关联去掉
      if (item.type.name.toLowerCase() === "file") {
        checkType = { Y: "s", N: "ps" };
      }
      let setting = {
        check: {
          enable: true,
          nocheckInherit: false,
          chkboxType: checkType
        },
        data: {
          simpleData: {
            enable: true
          }
        },
        callback: {
          beforeClick: this.beforeClick,
          onClick: this.zTreeOnClick,
          onCheck: this.zTreeOnCheck,
          onExpand: this.zTreeOnClick
        }
      };

      this.http.get(urlPath).then(res => {
        let data = res.data;
        if (data.success == true) {
          $.fn.zTree.init($("#treeDemo"), setting, data.data);
        }
      });
    },
    shareMenu(item) {
      let treeObj = $.fn.zTree.getZTreeObj("treeDemo");
      if (treeObj != null) {
        var nodes = treeObj.getNodes();
        for (var i = nodes.length - 1; i >= 0; i--) {
          treeObj.removeNode(nodes[i]);
        }
      }
      let path = this.GlobalUrlPath.processProduct.fileRootPath + 1; //1 共享 2 用户
      this.menuSetting(item, path);
    },

    userMenu(item) {
      let treeObj = $.fn.zTree.getZTreeObj("treeDemo");
      if (treeObj != null) {
        var nodes = treeObj.getNodes();
        for (var i = nodes.length - 1; i >= 0; i--) {
          treeObj.removeNode(nodes[i]);
        }
      }
      let path = this.GlobalUrlPath.processProduct.fileRootPath + 2; //1 共享 2 用户
      this.menuSetting(item, path);
    },

    zTreeOnClick(event, treeId, treeNode) {
      let path = this.GlobalUrlPath.processProduct.getFileListByPath;
      let param = {
        path: treeNode.id
      };
      var treeObj = $.fn.zTree.getZTreeObj(treeId);
      var node = treeObj.getNodeByParam("id", treeNode.id);
      treeObj.selectNode(node);
      let sNode = treeObj.getSelectedNodes();
      if (sNode.length > 0) {
        let zAsync = sNode[0].zAsync;
        treeObj.reAsyncChildNodes(treeNode, "refresh");
        if (zAsync) {
        } else {
          this.http.get(path, param).then(res => {
            let data = res.data;
            if (data.success == true) {
              treeNode.halfCheck = false;
              treeObj.addNodes(treeNode, data.data, false);
              sNode[0].zAsync = true;
            }
          });
        }
      }
    },

    zTreeOnCheck(event, treeId, treeNode) {
      var treeObj = $.fn.zTree.getZTreeObj(treeId),
        nodes = treeObj.getCheckedNodes(true);
      let item = this.currenItem;

      if (item.type.name.toLowerCase() === "file") {
        //文件筛选过滤
        // if (!item.type.plural && nodes.length > 1) {
        //   //限制单个文件
        //   this.$Message.error("该文件路径限制只能选一个文件哦！");
        //   treeNode.checked = false;
        //   treeObj.updateNode(treeNode);
        //   return;
        // }
        this.getFile(treeObj, treeNode);
        return;
      }
      if (item.type.name.toLowerCase() === "dir") {
        if (!treeNode.isParent) {
          this.$Message.error("请选择文件夹！");
          treeNode.checked = false;
          treeObj.updateNode(treeNode);
          return;
        }
        if (!item.type.plural && nodes.length > 1) {
          //限制单个文件夹
          this.$Message.error("当前算法限制只能选一个文件夹哦！");
          treeNode.checked = false;
          treeObj.updateNode(treeNode);
          return;
        }
      }
    },

    getFile(treeObj, treeNode) {
      let tempNode;
      let childsArr = [];

      if (treeNode.hasOwnProperty("children") && treeNode.checked) {
        tempNode = treeNode.children;
        this.getChildsByTreeNode(treeNode, childsArr);
        this.getFileBySuffix(treeObj, childsArr);
      } else if (treeNode.checked) {
        let suffix = this.currenSelectSuffix;
        let fileName = treeNode.name.toLowerCase();
        let regValue = fileName.substring(
          fileName.length - suffix.length,
          fileName.length
        );
        if (
          !suffix.hasOwnProperty("value") &&
          regValue !== suffix.toLowerCase()
        ) {
          treeNode.checked = false;
          this.$Message.error("文件格式不符合过滤条件");
        }
        treeObj.updateNode(treeNode);
      }
    },

    getChildsByTreeNode(treeNode, childsArr) {
      if (treeNode.isParent) {
        //是父节点获取所有子节点
        let childs = treeNode.children;
        for (var i in childs) {
          childsArr.push(childs[i]);
          this.getChildsByTreeNode(childs[i], childsArr);
        }
      }
      return childsArr;
    },
    getFileBySuffix(treeObj, childsFiles) {
      let nodes = childsFiles;
      let fileName;
      let regValue;
      let tempNode;
      let suffix = this.currenSelectSuffix;
      if (nodes.length == undefined) {
        if (!nodes.isParent) {
          //文件
          fileName = nodes.name.toLowerCase();
          regValue = fileName.substring(
            fileName.length - suffix.length,
            fileName.length
          );
          if (regValue === suffix) nodes.checked = true;
          else nodes.checked = false;
          treeObj.updateNode(nodes);
        }
      }
      for (var i = 0; i < nodes.length; i++) {
        tempNode = nodes[i];
        this.getFileBySuffix(treeObj, tempNode);
        if (tempNode.isParent) {
          let tempChilds = tempNode.children;
          let num = 0;
          for (var m in tempChilds) {
            if (tempChilds[m].checked) num++;
            if (num > 1) break;
          }
          if (num < 1) {
            tempNode.checked = false;
            treeObj.updateNode(tempNode);
          }
        }
      }
    },

    menuOk() {
      let isBatch = this.isBatch;
      var treeObj = $.fn.zTree.getZTreeObj("treeDemo"),
        nodes = treeObj.getCheckedNodes(true);
      let tempNode = "";
      let info = "";
      for (var index in nodes) {
        tempNode = nodes[index];
        if (
          this.currenItem.type.name.toLowerCase() === "file" &&
          tempNode.isParent
        )
          continue;
        if (info == "") info = tempNode.id;
        else if (isBatch) {
          info += "#HT#" + tempNode.id;
        } else {
          info += "#TASK#" + tempNode.id;
        }
      }

      console.log("zuobio之前的参考" + info);
      this.currenItem.default = info;
      this.reset();
    },
    menuRefOk() {
      let isBisRefModalatch = this.isRefModal;
      var treeObj = $.fn.zTree.getZTreeObj("treeDemo1"),
        nodes = treeObj.getCheckedNodes(true);
      let tempNode = "";
      let info = "";
      for (let i in nodes) {
        if (nodes.length > 1) {
          this.$Message.error("请选择一个参考坐标系");
          break;
        }
        info = nodes[0].content;
        console.log("之前的参考" + info);
        info = info.replace(/[\r\n]/g, "");
        console.log("之后的参考" + info);
        this.currenItem.default = info; //nodes[0].name;
        this.reset();
      }
    },
    menuCancel() {
      this.reset();
    },

    //目录选择页面 重置
    reset() {
      let isRefModal = this.isRefModal;
      var treeObj;
      if (isRefModal) {
        this.showZtreeRefModal = false;
        treeObj = $.fn.zTree.getZTreeObj("treeDemo1");
      } else {
        this.showZtreeModal = false;
        $(".displaySuffix").css("display", "none");
        treeObj = $.fn.zTree.getZTreeObj("treeDemo");
      }

      if (treeObj == null) return;
      var nodes = treeObj.getNodes();
      for (var i = nodes.length - 1; i >= 0; i--) {
        treeObj.removeNode(nodes[i]);
      }
    },

    // 过滤条件搜索
    suffixSearch() {
      var treeObj = $.fn.zTree.getZTreeObj("treeDemo"),
        nodes = treeObj.getCheckedNodes(true);
      if (nodes.length < 1) {
        this.$Message.error("没有选中的文件或文件夹");
        return;
      }
      for (var i in nodes) {
        this.getFile(treeObj, nodes[i]);
      }
    },

    // 文件另存为modal界面初始化
    menuSaveAs() {
      let treeObj = $.fn.zTree.getZTreeObj("treeDemo");
      if (treeObj == null) {
        this.$Message.error("请选择文件夹！");
        return;
      }

      let selectNodes = treeObj.getSelectedNodes();
      if (selectNodes.length < 1) {
        this.$Message.error("请选择文件夹节点！");
        return;
      }
      if (!selectNodes[0].isParent) {
        this.$Message.error("请选择文件夹！");
        return;
      }
      this.newFileName = ""; //界面文件名置为空
      this.saveAsModal = true;

      if (this.currenItem.type.name.toLowerCase() === "file") {
        self.isFile = true;
        $(".saveFile").css("display", "block");
        $(".saveFolder").css("display", "none");
      }
      //用于新增文件或文件夹标识
      else {
        $(".saveFile").css("display", "none");
        $(".saveFolder").css("display", "block");
        self.isFile = false;
      }
    },

    saveAsFileOK() {
      let fileName = this.newFileName;
      this.saveAsModal = false;
      let treeObj = $.fn.zTree.getZTreeObj("treeDemo");
      let selectNodes = treeObj.getSelectedNodes();
      let newNode = "";
      if (fileName == null || fileName == "") {
        this.$Message.error("文件名或文件夹名称为空，请重写填写");
      }
      if (isFile) {
        //文件 判断文件名是否符合带后缀
        let a = fileName
          .split("")
          .reverse()
          .join("");
        let b = a
          .substring(0, a.search(/\./))
          .split("")
          .reverse()
          .join("");
        if (b == null || b == "") {
          this.$Message.error("该文件名无效，没有后缀");
          return;
        }
        newNode = {
          name: fileName,
          id: selectNodes[0].id + "/" + fileName,
          isParent: false
        };
      } else
        newNode = {
          name: fileName,
          id: selectNodes[0].id + "/" + fileName,
          isParent: true
        };
      if (newNode == null) return;
      treeObj.addNodes(selectNodes[0], 0, newNode, true); //新增节点放在文件夹的顶层并默认选择
      let node = selectNodes[0].children[0];
      node.checked = true;
      treeObj.updateNode(node);
    },

    saveAsFileCancel() {
      this.saveAsModal = false;
    },
    //////////////////////////////////以上文件浏览功能//////////////////////////////////
    filteCancel() {
      this.processfilterModal = false;
    },
    filterOk() {
      this.processfilterModal = false;
      let sensorType = this.sensorOptionValue;
      let algoType = this.algoTypeOptionValue;
      let productionType = this.productionTypeValue;
      let region = this.regionValue;
      this.getProduct();
    },
    // 输入框判断 start
    onStartTimeChange(startTime, type) {
      this.startTimeOption = {
        disabledDate(startTime) {
          return startTime >= new Date(endTime) || startTime >= Date.now();
        }
      };
      // this.endTimeOption = {
      //   disabledDate(endTime) {
      //     return endTime < new Date(startTime) || endTime > Date.now();
      //   }
      // };
    },
    searchprovince() {
      let self = this;
      let path = this.GlobalUrlPath.dataEngine.queryFeatureBase64;
      let param = {
        collectionName: "area_info",
        orderColName: "",
        pageCount: 0,
        pageNum: 0,
        queryConditionList: [
          {
            compareOp: "=",
            fieldName: "type",
            fieldValue: 0
          }
        ],
        queryResultList: ["name", "code"]
      };
      let strJson = JSON.stringify(param);
      let sendData =  this.$Base64.encode(strJson);
      self.http.postText(path, sendData).then(res => {
        if (res.data.code == 0) {
          let province = res.data.data;
          // self.regionCascader = [];
          for (let i = 0; i < province.length; i++) {
            let tempdata = {
              value: province[i].properties.code,
              label: province[i].properties.name,
              children: [],
              loading: false
            };
            self.regionCascader.push(tempdata);
          }
        }
      });
    },
    searchCity(item, callback) {
      let _this = this;
      let path = this.GlobalUrlPath.dataEngine.queryFeatureBase64;
      let param = {
        collectionName: "area_info",
        orderColName: "",
        pageCount: 0,
        pageNum: 0,
        queryConditionList: [
          {
            compareOp: "=",
            fieldName: "type",
            fieldValue: 1
          },
          {
            compareOp: "=",
            fieldName: "parent_code",
            fieldValue: item.value
          }
        ],
        queryResultList: []
      };
      let strJson = JSON.stringify(param);
      let sendData =  this.$Base64.encode(strJson);
      _this.http.postText(path, sendData).then(res => {
        let city = res.data.data;
        for (let j = 0; j < city.length; j++) {
          let citytempdata = {
            value: city[j].geometry,
            label: city[j].properties.name
          };
          item.children.push(citytempdata);
        }
        item.loading = false;
        callback();
      });
    },
    loadRegionData(item, callback) {
      let _this = this;
      item.loading = true;
      setTimeout(() => {
        if (item.label === "其他") {
          item.children = [
            {
              value: "重点区域",
              label: "某重点区域"
            }
          ];
        } else if (item.label === "全国") {
          item.children = [
            {
              value: "全国",
              label: "全国"
            }
          ];
        } else {
          _this.searchCity(item, callback);
        }

        item.loading = false;
        callback();
      }, 500);
    }
  },
  components: {
    "big-img": viewBigImg
  }
};
</script>
<!--css样式-->
<style lang='scss' scoped>
.table0 {
  width: 646px; 
  height: 480px; 
  table-layout: fixed;
}
.picDiv {
  width: 310px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  border: 1px solid rgba(217, 217, 217, 1);
  margin: 0.1rem 1rem 0rem 5.6rem;
  //  width: 78%;
  height: 494px;
  display: flex;
  justify-content: center;
  align-items: center;
  .img1 {
    max-width: 100%;
    max-height: 460px;
  }
}

.optiostyle {
  height: 40px;
  width: 370px;
  float: right;
  font-size: 1rem;
  font-weight: bold;
  z-index: 99;
  margin-top: -50px;
}
.saveFileStyle {
  width: 280px;
}
.treeDiv {
  height: 500px;
  width: 760px;
  overflow-y: auto;
}
.treeDiv1 {
  height: 300px;
  width: 300px;
  overflow-y: auto;
}
.suffixBtn {
  margin-left: 10px;
}
.selectSuffix {
  float: left;
  width: 80%;
}
.inputTd {
  float: left;
  width: 88%;
  margin-bottom: 7px; //0px;
}

.btnBrowser {
  float: right;
  margin-top: 4px;
  margin-bottom: 0px;
}
.paramBtn {
  border: 0;
  color: #95a5bc;
}
.cardBody {
  margin-top: -21px;
}

.batchSelect {
  width: 550px;
  height: 200px;
  overflow-x: auto;
  overflow-y: auto;
}
.inputRadioDiv {
  display: flex;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  width: 556px;
  margin-left: 34px;
  background: rgba(216, 216, 216, 0.09);
  border-radius: 3px;
  border: 1px solid rgba(151, 151, 151, 0.09);
}

.inputRadioDiv1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  width: 153px;
  height: calc(1.5rem + 0.75rem + 2px);
  margin-left: 108px;
  background: rgba(216, 216, 216, 0.09);
  border-radius: 3px;
  border: 1px solid rgba(151, 151, 151, 0.09);
  padding-top: 6px;
  float: auto;
}
.inputRadioDiv2 {
  display: flex;
  width: 276px;
  height: calc(1.5rem + 0.75rem + 2px);
  margin-left: 38px;
  float: auto;
}
.inputRadioDiv3 {
  display: flex;
  height: calc(1.5rem + 0.75rem + 2px);
  margin-left: 16px;
  float: auto;
}
.processFileterDiv {
  width: 390px;
  text-align: left;
}
.levelDiv {
  width: 42px;
  float: left;
  padding-top: 6px;
  margin-left: 38px;
}
.levelDiv1 {
  width: 60px;
  float: left;
  padding-top: 6px;
  margin-left: 38px;
}
.inputRadio {
  width: 48%; //165px;
  margin-left: 10px;
}
.btn1 {
  margin: 0.3rem;
}
.footDiv {
  width: 100%;
  margin-top: -38px;
  z-index: 99;
}

 
.jia {
  width: 12px;
  height: 12px;
  margin: -15px 0 3px -6px;
}
.imgBtn {
  position: absolute;
  right: 11px;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}
.tbHeader {
  width: 100%;
  display: inline-block;
}
.delBtn {
  color: #4f5d73;
  background-color: #ebedef;
  border-color: #ebedef;
}
.delBtn:hover {
  color: #4f5d73;
  background-color: #d6dade;
  border-color: #cfd4d8;
}

.styImg {
  /* margin-left: 70px; */
  vertical-align: middle;
  max-width: 700px;
  // max-height: 450px;
  overflow: auto;
}
// .paramTable1 {
//   display: none;
// }
.processFilter {
  cursor: pointer;
}
.processFilter:hover {
  color: #2d8cf0;
}

.datePick {
  width: 152px;
  margin-left: 41px;
  margin-top: -5px;
}
.regionCas {
  margin-left: 60px;
  width: 77%;
  // margin-bottom: 13px;
}
</style>

